{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Highcharts Demos\n",
    "==========\n",
    "Treemap levels: http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/plotoptions/treemap-levels/\n",
    "-------------------------------------------------------------------------------"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 1,
   "metadata": {
    "collapsed": false
   },
   "outputs": [
    {
     "data": {
      "text/html": [
       "<iframe style=\"border:0;outline:none;overflow:hidden\" srcdoc=\"&lt;!DOCTYPE html&gt;\n",
       "&lt;html lang=&quot;en&quot;&gt;\n",
       "    &lt;head&gt;\n",
       "        &lt;meta charset=&quot;utf-8&quot; /&gt;\n",
       "        &lt;link href=&quot;https://www.highcharts.com/highslide/highslide.css&quot; rel=&quot;stylesheet&quot; /&gt;\n",
       "        &lt;script type=&quot;text/javascript&quot; src=&quot;https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js&quot;&gt;&lt;/script&gt;\n",
       "        &lt;script type=&quot;text/javascript&quot; src=&quot;https://code.highcharts.com/highcharts.js&quot;&gt;&lt;/script&gt;\n",
       "        &lt;script type=&quot;text/javascript&quot; src=&quot;https://code.highcharts.com/highcharts-more.js&quot;&gt;&lt;/script&gt;\n",
       "        &lt;script type=&quot;text/javascript&quot; src=&quot;https://code.highcharts.com/modules/exporting.js&quot;&gt;&lt;/script&gt;\n",
       "        &lt;script type=&quot;text/javascript&quot; src=&quot;http://code.highcharts.com/modules/treemap.js&quot;&gt;&lt;/script&gt;\n",
       "    &lt;/head&gt;\n",
       "    &lt;body style=&quot;margin:0;padding:0&quot;&gt;\n",
       "                &lt;div id=&quot;container&quot; style=&quot;width:550px;height:400px;&quot;&gt;Loading....&lt;/div&gt;\n",
       "\n",
       "\n",
       "    &lt;script&gt;\n",
       "        $(function(){\n",
       "\n",
       "\n",
       " \n",
       "\n",
       "\n",
       "\n",
       "\n",
       "            Highcharts.setOptions({&quot;lang&quot;: {}, &quot;global&quot;: {}});\n",
       "            var option = {&quot;loading&quot;: {}, &quot;subtitle&quot;: {}, &quot;xAxis&quot;: {}, &quot;title&quot;: {&quot;text&quot;: &quot;Highcharts Treemap&quot;}, &quot;series&quot;: {}, &quot;labels&quot;: {}, &quot;yAxis&quot;: {}, &quot;chart&quot;: {&quot;width&quot;: 550, &quot;renderTo&quot;: &quot;container&quot;, &quot;height&quot;: 400}, &quot;tooltip&quot;: {}, &quot;plotOptions&quot;: {}, &quot;credits&quot;: {&quot;enabled&quot;: false}, &quot;colors&quot;: {}, &quot;pane&quot;: {}, &quot;exporting&quot;: {}, &quot;drilldown&quot;: {}, &quot;navigation&quot;: {}, &quot;legend&quot;: {}};\n",
       "\n",
       "\n",
       "            var data = [{&quot;levels&quot;: [{&quot;dataLabels&quot;: {&quot;color&quot;: &quot;white&quot;, &quot;verticalAlign&quot;: &quot;top&quot;, &quot;align&quot;: &quot;left&quot;, &quot;enabled&quot;: true, &quot;style&quot;: {&quot;fontWeight&quot;: &quot;bold&quot;}}, &quot;borderWidth&quot;: &quot;3px&quot;, &quot;level&quot;: 1}, {&quot;layoutAlgorithm&quot;: &quot;stripes&quot;, &quot;level&quot;: 2}], &quot;name&quot;: &quot;Series 1&quot;, &quot;type&quot;: &quot;treemap&quot;, &quot;data&quot;: [{&quot;id&quot;: &quot;id_1&quot;, &quot;name&quot;: &quot;A&quot;}, {&quot;parent&quot;: &quot;id_1&quot;, &quot;id&quot;: &quot;id_2&quot;, &quot;value&quot;: 2, &quot;name&quot;: &quot;A1&quot;}, {&quot;parent&quot;: &quot;id_1&quot;, &quot;id&quot;: &quot;id_3&quot;, &quot;value&quot;: 2, &quot;name&quot;: &quot;A2&quot;}, {&quot;parent&quot;: &quot;id_1&quot;, &quot;id&quot;: &quot;id_4&quot;, &quot;value&quot;: 2, &quot;name&quot;: &quot;A3&quot;}, {&quot;name&quot;: &quot;B&quot;, &quot;value&quot;: 6}, {&quot;name&quot;: &quot;C&quot;, &quot;value&quot;: 4}, {&quot;name&quot;: &quot;D&quot;, &quot;value&quot;: 3}, {&quot;name&quot;: &quot;E&quot;, &quot;value&quot;: 2}, {&quot;name&quot;: &quot;F&quot;, &quot;value&quot;: 2}, {&quot;name&quot;: &quot;G&quot;, &quot;value&quot;: 1}], &quot;layoutAlgorithm&quot;: &quot;squarified&quot;}]\n",
       "            option.series = data;\n",
       "\n",
       " \n",
       "\n",
       "            var chart = new Highcharts.Chart(option);\n",
       "\n",
       "\n",
       "\n",
       "\n",
       "\n",
       " \n",
       "\n",
       "\n",
       "        \n",
       "    });\n",
       "        &lt;/script&gt;\n",
       "\n",
       "    &lt;/body&gt;\n",
       "&lt;/html&gt;\" height=400 width=550></iframe>"
      ],
      "text/plain": [
       "<highcharts.highcharts.highcharts.Highchart at 0x7f3bbc2b2550>"
      ]
     },
     "execution_count": 1,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "from highcharts import Highchart\n",
    "H = Highchart(width=550, height=400)\n",
    "\n",
    "options = {\n",
    "    'title': {\n",
    "        'text': 'Highcharts Treemap'\n",
    "    }\n",
    "}\n",
    "\n",
    "data = [{\n",
    "            'id': \"id_1\",\n",
    "            'name': 'A'\n",
    "        }, {\n",
    "            'id': \"id_2\",\n",
    "            'name': 'A1',\n",
    "            'value': 2,\n",
    "            'parent': 'id_1'\n",
    "        }, {\n",
    "            'id': \"id_3\",\n",
    "            'name': 'A2',\n",
    "            'value': 2,\n",
    "            'parent': 'id_1'\n",
    "        }, {\n",
    "            'id': \"id_4\",\n",
    "            'name': 'A3',\n",
    "            'value': 2,\n",
    "            'parent': 'id_1'\n",
    "        }, {\n",
    "            'name': 'B',\n",
    "            'value': 6\n",
    "        }, {\n",
    "            'name': 'C',\n",
    "            'value': 4\n",
    "        }, {\n",
    "            'name': 'D',\n",
    "            'value': 3\n",
    "        }, {\n",
    "            'name': 'E',\n",
    "            'value': 2\n",
    "        }, {\n",
    "            'name': 'F',\n",
    "            'value': 2\n",
    "        }, {\n",
    "            'name': 'G',\n",
    "            'value': 1\n",
    "        }]\n",
    "\n",
    "H.set_dict_options(options)\n",
    "H.add_data_set(data, 'treemap', layoutAlgorithm='squarified',\n",
    "            levels = [{\n",
    "                'level': 1,\n",
    "                'borderWidth': '3px',\n",
    "                'dataLabels': {\n",
    "                    'enabled': True,\n",
    "                    'align': 'left',\n",
    "                    'verticalAlign': 'top',\n",
    "                    'color': 'white',\n",
    "                    'style': {\n",
    "                        'fontWeight': 'bold'\n",
    "                    }\n",
    "                }\n",
    "            }, {\n",
    "                'level': 2,\n",
    "                'layoutAlgorithm': 'stripes'\n",
    "            }])\n",
    "\n",
    "H"
   ]
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "Python 2",
   "language": "python",
   "name": "python2"
  },
  "language_info": {
   "codemirror_mode": {
    "name": "ipython",
    "version": 2
   },
   "file_extension": ".py",
   "mimetype": "text/x-python",
   "name": "python",
   "nbconvert_exporter": "python",
   "pygments_lexer": "ipython2",
   "version": "2.7.6"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 0
}
